<template>
	<view style="height: 100%;margin-top: 200px;">
		<uni-card title="注册后台账号" >
			<uni-forms ref="fosm" :modelValue="formData" >
				<uni-forms-item label="账号" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<input class="input" v-model="formData.password" type="password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="passwordt">
					<input class="input" v-model="formData.passwordt" type="password" placeholder="请确认密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="liji">
				<button @click="submit" type="primary">注册</button>
			</view>
			
			
		</uni-card>
		<view class="gun">
			<uni-notice-bar scrollable single text=" 请牢记账号密码! 一个账号只有一次注册机会!"></uni-notice-bar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					password: '',
					passwordt: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}],
					},
					// 对password字段进行必填验证
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						},{
				minLength: 6,
			
				errorMessage: '密码长度在 {minLength} 字符以上',
			}],
					},
					// 对passwordt字段进行必填验证和自定义校验
					passwordt: {
						rules: [{
							required: true,
							errorMessage: '请确认密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value !== this.formData.password) {
									callback('两次输入的密码不一致');
								} else {
									callback();
									return true
								}
									
							},
						}],
					},
				},
			};
		},
			onReady() {
				// 需要在onReady中设置规则
				this.$refs.fosm.setRules(this.rules)
			},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs.fosm.validate().then(async res => {
					console.log('表单数据信息：', res);
					// 在这里执行提交操作
					 // 换取 token
							  const {data}= await uni.$http.post('/meng/houtaizhuce', res)
							  console.log(data);
							  if(data.code==200){
								  uni.showToast({
								  	title: data.message,
								  	duration: 2000,
									success:()=>{
										
									setTimeout(()=>{
										uni.switchTab({
										  url: '/pages/my/my'
										});
									},2000)
									}
								  });
							  }
							  // 2. 更新 vuex 中的 token
							 
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			},
		},
	};
</script>

<style lang="scss">
.liji {
	margin-top: 30px;
	button {
		width: 50vw;
		margin-top: 20px;
		background-color: #029d94;
	}
}
</style>
